import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, message as msg, Select } from 'antd';

const { Option } = Select;

@connect(({ sysUser, loading }) => ({
  modal: sysUser.modal,
  submitting: loading.effects['sysUser/update'],
}))
@Form.create()
class SysUserModal extends PureComponent {
  handleModalCancel = () => {
    const { dispatch, form } = this.props;
    form.resetFields();
    dispatch({ type: 'sysUser/closeModal' });
  };

  handleModalOk = () => {
    const { form, dispatch, onSubmit } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({ type: 'sysUser/update', payload: values }).then(({ code, message }) => {
          if (code === 0) {
            msg.success('操作成功');
            this.handleModalCancel();
            if (onSubmit) onSubmit(values);
          } else {
            msg.error(message);
          }
        });
      }
    });
  };

  render() {
    const {
      form,
      modal: { data, visible },
      submitting,
    } = this.props;
    const title = data.userId ? '更新用户' : '添加用户';
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
    };
    return (
      <Modal
        title={title}
        visible={visible}
        confirmLoading={submitting}
        onCancel={this.handleModalCancel}
        onOk={this.handleModalOk}
      >
        {form.getFieldDecorator('userId', { initialValue: data.userId })}
        <Form.Item label="登录用户名" {...formItemLayout}>
          {form.getFieldDecorator('username', {
            rules: [
              {
                type: 'string',
                required: true,
                message: '用户名不能为空！',
              },
            ],
            initialValue: data.username,
          })(<Input />)}
        </Form.Item>
        <Form.Item label="真实姓名" {...formItemLayout}>
          {form.getFieldDecorator('realname', {
            rules: [
              {
                type: 'string',
                required: true,
                message: '真实姓名不能为空！',
              },
            ],
            initialValue: data.realname,
          })(<Input />)}
        </Form.Item>
        <Form.Item label="手机号" {...formItemLayout}>
          {form.getFieldDecorator('phoneNo', {
            rules: [
              {
                type: 'string',
                required: true,
                message: '手机号不能为空！'
              },
            ],
            initialValue: data.phoneNo,
          })(<Input />)}
        </Form.Item>
        {!data.userId ? 
          <Form.Item label="初始密码" {...formItemLayout}>
            {form.getFieldDecorator('password', {
              rules: [
                {
                  type: 'string',
                  required: true,
                  message: '初始登录密码不能为空！'
                },
              ],
              initialValue: data.password,
            })(<Input />)}
          </Form.Item> : null}
        <Form.Item label="性别" {...formItemLayout}>
          {form.getFieldDecorator('sex', {
            rules: [
              {
                type: 'string',
                required: false,
              },
            ],
            initialValue: data.sex,
          })(
            <Select style={{ width:300 }}>
              <Option value="男">男</Option>
              <Option value="女">女</Option>
              <Option value="保密">保密</Option>
            </Select>
          )}
        </Form.Item>
      </Modal>
    );
  }
}

export default SysUserModal;
